import './start.scss';
import indexHtml from './start.html';
import app from '../../index.js';
import * as d3 from 'd3';
import $ from "jquery";

export default{
  init:function () {
    app.config(['$stateProvider', function ($stateProvider) {
      $stateProvider.state('start', {
        url: '/start',
        template: indexHtml
      });
    }]);
    app.controller('demoController', ["$scope","$http",function ($scope,$http) {
      // $scope.title = 'demo';
      $http.get('/api/data').then(function (d) {
          var treeData = d.data;
          console.log(treeData);
          var height = $("#draw").height(),
              width = $("#draw").width();

          var startNode = treeData.data.ciNodes;
          var startLink = treeData.data.ciRltLines;

          var arrX = [] , arrY = [];
          for(var i = 0 ; i < startNode.length ; i++){
              var xRandom = Math.random()*(width-20);
              var yRandom = Math.random()*(height-20);
              var len = arrX.length;
              var flag = true
              for(var x = 0 ; x < len ; x++){
                  if(Math.abs(xRandom - arrX[x])<10 || Math.abs(yRandom - arrY[x])<10 || xRandom<10 || yRandom < 10){
                      flag = !flag;
                  }
              }
              if(flag){
                  startNode[i].cx = xRandom;
                  startNode[i].cy = yRandom;
                  arrX.push(xRandom);
                  arrY.push(yRandom);
              }

          }

          var svg = d3.select("svg")
          var middle = svg.append("g")
              .attr("class","middle");

          var radius = d3.scaleLinear()
              .domain([3 , 5])
              .range([40, 70]);

          // 根据权重获取圆形半径
          function _r(d) {
              return radius(d.weight);
          }

          //添加marker标签及其属性
          var arrowMarker = middle.append("marker")
              .attr("id","arrow")
              .attr("markerUnits","strokeWidth")
              .attr("markerWidth",12)
              .attr("markerHeight",12)
              .attr("viewBox","0 0 12 12")
              .attr("refX",3)
              .attr("refY",3)
              .attr("orient","auto")
          var arrow_path = "M0,0 L3,3 L0,6 Z";
          // 定义箭头
          arrowMarker.append("path")
              .attr("d",arrow_path)
              .attr("fill","#ccc");


          // 设置圆点容器
          var node = middle.selectAll('g.node')
              .data(startNode)
              .enter()
              .append("g")
              .attr("class","node")
              .attr("opacity",1)
              .attr("name",function(d){return d.id;})
              .on('mouseenter',function(d){
                  $(".updiv").css("display","none");
                  $(".linkN").remove();
                  hoverNod(d.id);
              })

              .on('click',function(d){
                  if(($("#draw").height()-d.cy+40) < 200 && ($("#draw").width()-d.cx) < 200){
                      $(".updiv").css("display","block").css("top",d.cy-d.sourceId*10+40-190).css("left",d.cx-d.sourceId*10-190).html(d.id);
                  }else if(($("#draw").height()-d.cy+40) < 200){
                      $(".updiv").css("display","block").css("top",d.cy-d.sourceId*10+40-190).css("left",d.cx+d.sourceId*10).html(d.id);
                  }else if(($("#draw").width()-d.cx) < 200){
                      $(".updiv").css("display","block").css("top",d.cy+d.sourceId*10+40).css("left",d.cx-d.sourceId*10-190).html(d.id);
                  }else{
                      $(".updiv").css("display","block").css("top",d.cy+d.sourceId*10+40).css("left",d.cx+d.sourceId*10).html(d.id);
                  }

              })

          // 添加圆圈
          node.append('circle')
              .attr("fill",function(d,i){return d.classColor})
              .attr("stroke","#fff")
              .attr("cx",function(d){return d.cx ;})
              .attr("cy",function(d){return d.cy ;})
              .attr("r",function(d){return d.sourceId * 10;})

          // 添加文字
          node.append('text')
              .attr('font-size', 12)
              .attr("fill","#fff")
              .attr('text-anchor', 'middle')
              .attr('alignment-baseline', 'middle')
              .text(function (d) {
                  return d.ciCode;
              })
              .attr("x",function(d){return d.cx ;})
              .attr("y",function(d){return d.cy + d.sourceId*20;})


          // 克隆关系对象
          function clone(link1){
              var clonelink = [];
              for (var i = 0 ; i < link1.length ; i++){
                  var source = link1[i].source;   var target = link1[i].target;
                  var obj = {source : source , target : target , id : link1[i].id };   clonelink.push(obj);
              }return clonelink;
          }
          // 克隆节点对象
          function clonenodes(node1){
              var clonenode = [];
              for (var i = 0 ; i < node1.length ; i++){
                  var obj = {id:node1[i].id , name:node1[i].name , code:node1[i].attrs ,
                      weight:node1[i].sourceId , classColor:node1[i].classColor , cx:node1[i].cx , cy:node1[i].cy};
                  clonenode.push(obj);
              }return clonenode;
          }


          function hoverNod(nodeId){
              // 找出节点相关的连线
              var link1arr = [];
              function arrBu(id,obj,obj2){
                  var flag1 = false;    var flag2 = false;  var flag = false;
                  if (id == obj){ flag1 = true; };
                  if(id == obj2){ flag2 = true; };
                  if( flag1 ==true || flag2 == true){ flag = true; }
                  return flag;
              }

              var clonelink = clone(startLink);
              var clonenode = clonenodes(startNode);
              var x , y ;

              for(var i = 0 ; i < clonelink.length ; i++){
                  if(arrBu(nodeId,clonelink[i].source,clonelink[i].target)){
                      for(var j = 0 ; j < clonenode.length ; j++){
                          if(clonelink[i].source == clonenode[j].id){
                              clonelink[i].source = clonenode[j]
                          }
                      }
                      for(var k = 0 ; k < clonenode.length ; k++){
                          if(clonelink[i].target == clonenode[k].id){
                              clonelink[i].target = clonenode[k]
                          }
                      }
                      link1arr.push(clonelink[i]);
                  }
              }

              // 添加连线
              var link = middle.append("g")
                  .attr("class","linkN")

              link.selectAll("path")
                  .data(link1arr)
                  .enter()
                  .append("path")
                  .attr("class","edge")
                  .attr("marker-end","url(#arrow)")
                  .style("stroke","#ccc")
                  .style("stroke-width",2);

              middle.selectAll('.edge')
                  .attr('d', function (d) {
                      var dx = d.target.cx - d.source.cx,
                          dy = d.target.cy - d.source.cy,
                          dr = Math.sqrt(dx * dx + dy * dy);

                      return ['M', d.source.cx + _r(d.source) * dx / dr ,
                          d.source.cy + _r(d.source) * dy / dr ,
                          'L', d.target.cx - _r(d.target) * dx / dr ,
                          d.target.cy - _r(d.target) * dy / dr].join(' ');

                  });


          }

      });
    }]);
  }

}

